﻿@{
    ViewBag.Title = "物料管理";
}

<div class="input-group">
    <div class="row col-md-12 ml-0" style="min-height:5vh;">
        <div class="col-3 pr-0" style="display: none">
            <select id="Material-Person"></select>
            <select id="Material-Group"></select>
        </div>
        <strong class="font-rfs" style="margin-right: 2rem;padding-top: 0.4rem;">物料管理</strong>
        <select id="Material-Select-Type1" class="form-control font-rfs custom-headtoolbar-select" style="width:10%;"></select>
        <select id="Material-Select-Type2" class="form-control font-rfs custom-headtoolbar-select" style="width:10%;"></select>
        <button id="addMaterial" class="btn btn-rfs"><i class="bi-plus-square"></i> 添加</button>
        <button id="editMaterial" class="btn btn-rfs"><i class="bi-pencil-square"></i> 编辑</button>
        <button id="delMaterial" class="btn btn-rfs"><i class="bi-trash"></i> 删除</button>
    </div>
</div>
<div class="row col-md-12 ml-0" style="min-height:90vh;">
    <div class="row col-md-12" style="padding-right:0;margin-left: 0px;padding-left: 0;min-height:90vh;">
        <div class="table-responsive-sm shadow p-0 bg-white rounded col-md-12 pre-scrollable" style="min-height:90vh;">
            <table id="tabMaterial" class="table table-striped table-bordered table-sm table-hover">
                <thead>
                    <tr>
                        <th>物料代码</th>
                        <th>物料名称</th>
                        <th>一级分类</th>
                        <th>二级分类</th>
                        <th>设备类型</th>
                        <th>设备编号</th>
                        <th>高限</th>
                        <th>低限</th>
                        <th>提醒组</th>
                        <th>提醒人</th>
                        <th>备注</th>
                        <th>管控</th>
                        <th>启用</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
    </div>
</div>
<div class="row col-md-12 ml-0" style="min-height:1vh;"></div>
@* <div class="row col-md-12 ml-0" style="min-height:3vh;">
    <ul class="nav col-md-12" style="margin-bottom: 1px;padding-right: 0px;min-height:3vh;">
        <li class="tabButton col-md-1 tab-other-active font-rfs" style="text-align: center;padding-left: 1px;padding-right: 1px;border-left: 1px solid #a8bfde;min-height:3vh;" data-active="false">
            <a href="#tabMaintain" data-toggle="tab" class="text-decoration-none" style="display: inline-block;width:100%;min-height:3vh;">期间核查</a>
        </li>
        <li class="col-md-11 tab-Notactive" style="text-align: center;min-height:3vh;"><a href="" data-toggle="tab"></a></li>
    </ul>
</div> *@
@* <div class="row col-md-12 ml-0">
    <div class="row col-md-12 tab-body" style="padding-right:0;margin-left: 0px;padding-left:0px;">
        <div class="row col-md-12" style="min-height:5vh;">
            <button id="Material-addEvent" class="btn btn-rfs"><i class="bi-plus-square"></i> 添加</button>
            <button id="Material-EnableME" class="btn btn-rfs"><i class="bi-sign-stop-fill" style="color:forestgreen"></i> 启用/停用</button>
            <button id="Material-delEvent" class="btn btn-rfs"><i class="bi-trash"></i> 删除</button>
            <button id="Material-DoMaintain" class="btn btn-rfs"><i class="bi-wrench-adjustable" style="color:forestgreen"></i> 维护</button>
        </div>
        <div class="table-responsive-sm shadow p-0 bg-white rounded col-md-12 pre-scrollable" style="min-height:8vh;">
            <table id="Material-tabEvent" class="table table-striped table-bordered table-sm table-hover">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>名称</th>
                        <th>描述</th>
                        <th>上次维护</th>
                        <th>频率</th>
                        <th>频率单位</th>
                        <th>下次维护</th>
                        <th>提醒</th>
                        <th>接收组</th>
                        <th>接收人</th>
                        <th>状态</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
        <div class="row col-md-12 ml-0" style="min-height:1vh;"></div>
        <ul class="nav col-md-12" style="margin-bottom: 1px;padding-right: 0px;min-height:3vh;">
            <li class="tabButton col-md-1 tab-other-active font-rfs" style="text-align: center;padding-left: 1px;padding-right: 1px;border-left: 1px solid #a8bfde;min-height:3vh;" data-active="false">
                <a href="#" data-toggle="tab" class="text-decoration-none" style="display: inline-block;width:100%;min-height:3vh;">核查记录</a>
            </li>
            <li class="col-md-11 tab-Notactive" style="text-align: center;min-height:3vh;"><a href="" data-toggle="tab"></a></li>
        </ul>
        <div class="table-responsive-sm shadow p-0 bg-white rounded col-md-12 pre-scrollable" style="height:28vh;">
            <table id="Material-MaintainRecord" class="table table-striped table-bordered table-sm table-hover pre-scrollable">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>说明</th>
                        <th>开始时间</th>
                        <th>结束时间</th>
                        <th>登记时间</th>
                        <th>维护人</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
    </div>
</div> *@
<div class="modal" id="SAMPLE-addMaterial-myModal" role="dialog" aria-hidden="true" data-backdrop="static">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class='modal-header'>
                <p id="modalTitle" class="pt-3 pl-3 font-rfs"></p>
                <a data-dismiss="modal" class="modal-close">&times;</a>
                <label id="SAMPLE-addMaterial-ModalID" style="display:none">SAMPLE-addMaterial-myModal</label>
            </div>
            <div class="modal-body">
                <div id="SAMPLE-addMaterial-Embed"></div>
            </div>
        </div>
    </div>
</div>
<div class="modal" id="DeleteConfirm" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class='modal-header'>
                <p class="pt-3 pl-3 font-rfs">删除</p>
                <a data-dismiss="modal" class="modal-close">&times;</a>
            </div>
            <div class="modal-body">
                <p class="font-rfs">确认删除当前选中记录吗？</p>
            </div>
            <div class="modal-Delete-footer">
                <button id="modal-delete" class="btn btn-outline-primary border-radius-noradius noLeftBorder noRightBorder font-rfs" style="width:50%; height:fit-content">删除</button>
                <button id="modal-cancel" data-dismiss="modal" class="btn btn-outline-primary border-radius-noradius noRightBorder font-rfs" style="width:50%; height:fit-content">取消</button>
            </div>
        </div>
    </div>
</div>

@section Scripts{
    <script>
        var MaterialId = "";
        var ulist = {};
        $(document).ready(function () {
            LoadType1();
            LoadUsers('Material-Person');
            LoadAllGroupList('Material-Group');
        });

        function LoadType1() {
            $.post("GetMaterialType1", {
            }, function (data) {
                for (var i = 0; i < data.length; i++) {
                    $("#Material-Select-Type1").append(new Option(data[i].type1));
                }
                $("#Material-Select-Type1").prepend(new Option("", ""));
                $("#Material-Select-Type1").val("");
            });
        }

        function LoadType2() {
            $.post("GetMaterialType2ByType1", {
                type1: $("#Material-Select-Type1").find("option:selected").text()
            }, function (data) {
                $("#Material-Select-Type2").empty();
                for (var i = 0; i < data.length; i++) {
                    $("#Material-Select-Type2").append(new Option(data[i].type2));
                }
                $("#Material-Select-Type2").prepend(new Option("", ""));
                $("#Material-Select-Type2").val("");
            });
        }

        function LoadMateria() {
            var columns = [{ field: "code" }, { field: "name" }, { field: "type1" }, { field: "type2" }, { field: "equipmentType" },
            { field: "equipmentId" }, { field: "highLimit" }, { field: "lowLimit" }, { field: "remindGroup", formatter: SetGroup },
            { field: "remindPerson", formatter: SetPerson },{ field: "note" }, { field: "isReview", width: "5%", align: "center", formatter: SetIsReviewCortrol },
            { field: "isEnable", width: "5%", align: "center", formatter: SetIsEnableCortrol }];

            MaterialId = "";  /*清空该值*/
            $('#tabMaterial').bootstrapTable('destroy'); // 这行代码必须加，否则数据无法刷新
            $('#tabMaterial').bootstrapTable({
                method: 'post',
                url: "GetMaterialListByType",
                dataType: "json",  // 服务器端返回值类型
                contentType: "application/x-www-form-urlencoded; charset=UTF-8", // 如果是 POST 请求，这个属性必须加
                queryParams: function (params) {
                    var data = {
                        limit: params.limit, // 每页显示多少条记录
                        offset: params.offset, // 偏移量
                        type1: $("#Material-Select-Type1").find("option:selected").text(),
                        type2: $("#Material-Select-Type2").find("option:selected").text()
                    };
                    return data;
                },
                queryParamsType: "limit", // 服务器端分页，这个参数必需是“limit”
                dataField: "rows",

                uniqueId: "code",          // 设置主键
                sidePagination: "server", // 服务器端分页，这个参数必需设置
                pagination: true,  // 显示分页条,设为true，启用了分页功能
                pageNumber: 1,
                pageSize: 10,   // 默认页大小
                pageList: [10, 20, 30, 50],  // 控制每页数目
                locale: "zh-CN",
                columns: columns,

                selectItemName: "selectItem", // 指定选择行ID
                clickToSelect: true, // 相应单击，自动选中此行
                checkboxHeader: true, // 标题行显示全选按钮

                onClickRow: function (row, $element, field) {
                    $("#tabMaterial").find("tbody").find("tr").each(function () {
                        $(this).removeClass('changeblueColor');
                    });
                    $element.addClass("changeblueColor");
                    MaterialId = row.code;
                },
                silent: true,
                formatLoadingMessage: function () {
                    return "请稍等，正在加载中...";
                },
                formatNoMatches: function () {
                    return '无符合条件的记录';
                },
                onLoadError: function (data) {
                    $('#tabMaterial').bootstrapTable('removeAll');
                },
                onLoadSuccess: function (data) {
                    SetBootstrapStyle();
                },
                formatShowingRows: function (pageFrom, pageTo, totalRows) {
                    return "正在显示第" + pageFrom + "到第" + pageTo + "条记录，总共" + totalRows + "条记录 ";
                },
                formatRecordsPerPage: function (pageNumber) {
                    return " 每页显示" + pageNumber + '条记录';
                }
            });
        }

        function SetPerson(value, row, index) {
            var strHtml = "<select class='table-cell-select' onchange='UpdateMaterialPerson(this)'>";
            var array = $('#Material-Person option').toArray();
            $(array).each(function () {
                if (value == $(this).html()) {
                    strHtml = strHtml + "<option value='" + $(this).val() + "' selected='true'>" + $(this).html() + "</option>";
                } else {
                    strHtml = strHtml + "<option value='" + $(this).val() + "'>" + $(this).html() + "</option>";
                }
            })
            return strHtml + "</select>";
        }

        function SetGroup(value, row, index) {
            var strHtml = "<select class='table-cell-select' onchange='UpdateMaterialGroup(this)'>";
            var array = $('#Material-Group option').toArray();
            $(array).each(function () {
                if (value == $(this).html()) {
                    strHtml = strHtml + "<option value='" + $(this).val() + "' selected='true'>" + $(this).html() + "</option>";
                } else {
                    strHtml = strHtml + "<option value='" + $(this).val() + "'>" + $(this).html() + "</option>";
                }
            })
            return strHtml + "</select>";
        }

        function SetIsEnableCortrol(value, row, index) {
            var strHtml = "";
            if (value) {
                strHtml = "<input type='checkbox' checked onclick='UpdateEnableOnClick(this)' data-rowid='" + row.code + "'/>";
            } else {
                strHtml = "<input type='checkbox' onclick='UpdateEnableOnClick(this)' data-rowid='" + row.code + "'/>";
            }
            return strHtml;
        }

        function SetIsReviewCortrol(value, row, index) {
            var strHtml = "";
            if (value) {
                strHtml = "<input type='checkbox' checked onclick='UpdateIsReviewOnClick(this)''/>";
            } else {
                strHtml = "<input type='checkbox' onclick='UpdateIsReviewOnClick(this)''/>";
            }
            return strHtml;
        }

        function UpdateEnableOnClick(obj) {
            var st = $(obj).prop("checked");
            var rowid = $(obj).attr("data-rowid");

            $.post("UpdateMaterialEnable", {
                MaterialId: rowid,
                IsEnable: st
            }, function (data) {
                alert(data);
            });
        }

        function UpdateIsReviewOnClick(obj) {
            var st = $(obj).prop("checked");
            var rowid = $(obj).parent().parent().attr('data-uniqueid');

            $.post("UpdateMaterialIsReview", {
                MaterialId: rowid,
                IsReview: st
            }, function (data) {
                alert(data);
            });
        }

        function UpdateMaterialPerson(obj) {
            var st = $(obj).prop("checked");
            var rowid = $(obj).parent().parent().attr('data-uniqueid');

            $.post("UpdateMaterialPerson", {
                MaterialId: rowid,
                RemindPersonId: $(obj).val(),
                RemindPerson: $(obj).find("option:selected").text()
            }, function (data) {
                //alert(data);
            });
        }

        function UpdateMaterialGroup(obj) {
            var st = $(obj).prop("checked");
            var rowid = $(obj).parent().parent().attr('data-uniqueid');

            $.post("UpdateMaterialGroup", {
                MaterialId: rowid,
                RemindGroupId: $(obj).val(),
                RemindGroup: $(obj).find("option:selected").text()
            }, function (data) {
                //alert(data);
            });
        }

        $("#Material-Select-Type1").change(function () {
            LoadType2();
            LoadMateria();
        });

        $("#Material-Select-Type2").change(function () {
            LoadMateria();
        });

        $("#delMaterial").click(function () {
            if (MaterialId == "") {
                return false;
            }

            $("#DeleteConfirm").modal({
                backdrop: 'static',
                keyboard: false
            });
        });

        $("#modal-delete").click(function () {
            $.post("DelMaterial", {
                Code: MaterialId
            }, function (data) {
                if (data.indexOf("成功") >= 0) {
                    $('#tabMaterial').bootstrapTable('removeByUniqueId', MaterialId);  // 删除指定的行
                    MaterialId = "";  // 删除行后，将这个值置空，否则直接编辑信息就会报错。
                } else {
                    alert(data);
                }
            });

            $("#DeleteConfirm").modal('hide');
        });

        $("#addMaterial").click(function () {
            $("#modalTitle").text("添加物料");

            $("#SAMPLE-addMaterial-myModal").modal({
                backdrop: 'static',
                keyboard: false
            });

            $("#addMaterial", parent.document.body).attr("src", "AddMaterial");
            $.post("AddMaterial", {
                ModalID: "SAMPLE-addMaterial-myModal"
            }, function (datas) {
                $("#SAMPLE-addMaterial-Embed").html(datas);
            });
        });

        $("#editMaterial").click(function () {
            if (MaterialId.length == 0) {
                alert("请先选择需要编辑的物料！");
                return;
            }

            $("#modalTitle").text("编辑物料");

            $("#SAMPLE-addMaterial-myModal").modal({
                backdrop: 'static',
                keyboard: false
            });

            $("#editMaterial", parent.document.body).attr("src", "AddMaterial");
            $.post("AddMaterial", {
                MaterialId: MaterialId,
                ModalID: "SAMPLE-addMaterial-myModal"
            }, function (datas) {
                $("#SAMPLE-addMaterial-Embed").html(datas);
            });
        });

        $('#SAMPLE-addMaterial-myModal').on('hidden.bs.modal', function (event) {
            if (event.target == this) {
                if (MaterialId.length > 0) {
                    $.post("GetMaterialByCode", {
                        Code: MaterialId
                    }, function (data) {
                        var row = $('#tabMaterial').bootstrapTable('getRowByUniqueId', MaterialId);
                        row.code = data.code;
                        row.name = data.name;
                        row.type1 = data.type1;
                        row.type2 = data.type2;
                        row.equipmentType = data.equipmentType;
                        row.equipmentId = data.equipmentId;
                        row.note = data.note;
                        $('#tabMaterial').bootstrapTable('updateByUniqueId', row);
                    });
                }
            }
        });

        // $("#Material-addEvent").click(function () {
        //     if (MaterialId.length == 0) {
        //         alert("请先选择需要编辑的物料！");
        //         return;
        //     }

        //     $.post("/Eq/CreatMaintainEvent", {
        //         EqId: MaterialId,
        //         EventsName: "期间核查",
        //         Description: ''
        //     }, function (data) {
        //         alert(data);
        //     });
        // });

    </script>
}
